<template>
  <scroll-view scroll-y class="message-scroll" :scrollTop="scrollTop" scroll-with-animation>
    <block v-for="(item,index) in messageList" :key="index">
      <view class="comment-item u-flex-y-center" v-if="item.to != chat_id">
        <u-image :src="prefixURL(item.avatar)" width="79rpx" height="79rpx" radius="6rpx"
          customStyle="margin:0 14rpx"></u-image>
        <view class="comment-conent">{{item.payload.text}}</view>
      </view>
      <view class="comment-item  u-flex-y-center u-flex-end" v-else>
        <view class="comment-conent comment-right">{{item.payload.text}}</view>
        <u-image :src="prefixURL(userInfo.avatar)" width="79rpx" height="79rpx" radius="6rpx"
          customStyle="margin:0 14rpx"></u-image>
      </view>
    </block>
  </scroll-view>
  <view class="action-bar u-flex-y-center ">
    <u-input placeholder="输入发送内容" v-model="keyword" @confirm="_sendMessage"> </u-input>
    <!-- <image src="@/static/images/03_1dg.png" mode=""></image> -->
    <u-button color="#f86d4e" customStyle="width:120rpx;height:60rpx;margin-left:20rpx" @click="_sendMessage">发送</u-button>
  </view>
</template>

<script setup>
  import TencentCloudChat from '@tencentcloud/chat'
  import { nextTick, onMounted, ref } from 'vue';
  import { getCache, prefixURL } from '../../util/util';
  const props = defineProps({
    chat_id: {
      type: String,
      default: ''
    },
    chat_name: {
      type: String,
      default: ''
    }
  })
  const scrollTop = ref(0)
  const messageList = ref([])
  const keyword = ref('')
  const userInfo = getCache('userInfo')
  uni.setNavigationBarTitle({
    title: props.chat_name
  })
	uni.$chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, ()=>{
	  _getMessageList()
	})
  onMounted(() => {
    _getMessageList()
  })
  // 历史消息
  const _getMessageList = (nextReqMessageID = '') => {
    uni.$chat.getMessageList({
      conversationID: `C2C${props.chat_id}`,
      nextReqMessageID: '',
    }).then(res => {
      messageList.value = res.data.messageList
      scrollTop.value = messageList.value.length * 50
      console.log(messageList.value)
    })
  }
  // 发送文本消息
  const _sendMessage = () => {
    let message = uni.$chat.createTextMessage({
      to: props.chat_id,
      conversationType: TencentCloudChat.TYPES.CONV_C2C,
      payload: {
        text: keyword.value
      },
    })
    uni.$chat.sendMessage(message).then(res => {
      messageList.value.push({
        to: props.chat_id,
        payload: {
          text: keyword.value
        },
      })
      nextTick(() => {
        scrollTop.value = messageList.value.length * 50
        keyword.value = ''
      })
    }).catch(err => {
      console.log(err)
    })
  }
</script>

<style lang="scss" scoped>
  .message-scroll {
    height: calc(100vh - 150rpx - env(safe-area-inset-bottom));
  }

  .comment-item {
    margin: 50rpx 10rpx;

    .comment-avatar {
      width: 79rpx;
      height: 79rpx;
      border-radius: 6rpx;
      margin: 0 14rpx;
    }

    .comment-conent {
      background: #fff;
      padding: 20rpx;
      font-size: 32rpx;
      font-weight: 500;
      border-radius: 12rpx;
    }

    .comment-right {
      background: #F87610;
      color: #fff;
    }
  }

  .action-bar {
    padding: 20rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9;

    ::v-deep .u-input {
      background-color: #f3f3f3;
    }

    ::v-deep .u-border {
      border-color: #f3f3f3 !important;
    }

    image {
      width: 52rpx;
      height: 46rpx;
      margin-left: 20rpx;
    }
  }
</style>